import React, { useEffect, useRef, useState } from 'react'
import PubSub from 'pubsub-js'
import { nanoid } from 'nanoid'
import Footer from './components/Footer/Footer'
import Header from './components/Header/Header'
import List from './components/List/List'
import './App.css'
export default function App() {
    let [todos, setTodos] = useState([]);
    useEffect(() => {
        // 添加todo
        PubSub.subscribe('addTodo', (msg, title) => {
            // 只能读取到初始值 []
            // const todo = {
            //     id:nanoid(),
            //     title,
            //     isDone:false
            // }
            // setTodos([todo, ...todos]);

            setTodos(todos => { // 回调函数的参数是缓存区中最新的todos
                const todo = {
                    id: nanoid(),
                    title,
                    isDone: false
                }
                return [todo, ...todos]
            })
        });

        // 根据id删除
        PubSub.subscribe('deleteTodo', (msg, id)=>{
            if(!window.confirm('确定删除么？')) return;
            setTodos(todos=>{
                return todos.filter(todo=>todo.id !== id)
            })
        })

        // checkDone
        PubSub.subscribe('checkDone', (msg, todo)=>{
            setTodos(todos=>{
                return todos.map(item=>{
                    if(item.id === todo.id){
                        item.isDone = !item.isDone;
                    }
                    return item;
                })
            })
        })

    }, [])

    return (
        <div className="todo-container">
            <div className="todo-wrap">
                <Header />
                <List todos={todos} />
                <Footer />
            </div>
        </div>
    )
}
